Ф 


7 
Webpack: = 
заменить нельзя оставить 


Кувшинов Евгений 
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“Распространённые инструменты сборки в 10-100х 
медленнее, чем они могут быть” 


Эван Уоллес 
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Евгений Кувшинов 


* Фронтендер 
• Тренер по инженерным практикам 


e 5 лет развивал фронтенд и инженерную 
культуру в ManyChat 
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Что вы используете для сборки? 


Webpack Rollup Vite змс ESBuild 


Сколько времени занимает сборка? 
1+ МИН 


10+ сек 


1-10 сек 
Есе 


У меня в начале 2021 года: 


— Webpack 
— 3+ МИН 
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История повторяется 


THE #1 PROGRAMMER EXCUSE 
FOR LEGITIMATELY SLACKING OFF: 


“MY CODE’S COMPILING.” 


HEY! GET BACK 
тошокко _ 


pL. 
\ 


| 
i ЕС 
| 


bk 


OH. CARRY ON. У 
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k1ib35/8kibmac project % npm start 
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План 


e Почему я стал искать альтернативы Webpack? 
e Вип ег, compiler, dev-tool: кто есть кто? 
e Что предлагают SWC и ESBuild 


е Замена Webpack на проекте с шестилетней историей 
разработки 
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Где болит от медленнои сборки? 
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Локальная сборка 


при разработке 


9 
а 
S0 


Сборка на С! 


при интеграции 


На что влияет скорость сборки? 


Lead ите for changes 
Deployment frequency 
Time to restore 
Developer experience 
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На что влияет скорость сборки? 


Метрики и успешность организации 
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Цели: 


Пайплайн С! за 4 минуты 
сборка+линтер+тесты+деплой 


Улучшить ОХ 
метрика: фидбэк от разработчиков 
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В путь! 


Но сначала немного о процессе 
сборки... 
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Bundler, build tool, transpiler... 


Кто есть кто? 
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Өбө / 7 Babel: The compiler for writin x | Loiane 


< Œ ё Secure | https://babeljs.io/replZ?babili-false&browsers-.. Q Ж 


1 сопѕо1е.109('Варе1|'); 1 | use strict ; 
2 
3 console.log('Babel' ); 
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Source-to-source compiler (transpiler) 


© © Ө / 7 вае: The compiler for writin x ТА Loiane 


= С ё Secure | https://babeljs.io/repl#?babili=false&browsers=... Q wv 


1 console.log('Babel|' ); 1| пве ВЕЕЗСЕ : 
2 
3 console.log('Babel'); 
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DOCUMENTATION CONTRIBUTE VOTE BLOG © Y iv ж (О Search BB 


bundle your scripts 


STATIC ASSETS 


MODULES WITH DEPENDENCIES 
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Bundler 


DOCUMENTATION CONTRIBUTE VOTE BLOG © Y 17 ж (О Search BB 


bundle your scripts 


STATIC ASSETS 


MODULES WITH DEPENDENCIES 
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Задачи Webpack 


e Построить граф зависимостей 
e Загрузить и преобразовать зависимости 
* Скомпоновать и сохранить их в новой структуре 
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Webpack + Babel = 


DOCUMENTATION CONTRIBUTE VOTE BLOG О м 人 giv ж (О Search BG 


bundle your scripts 


STATIC ASSETS 


MODULES WITH DEPENDENCIES 
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Vite 
Next Generation 
Frontend Tooling 


Get ready for a development environment that 
can finally catch up with you. 


_ Get Started Why Vite? View on GitHub 


“Vite is a build tool... И consists of two major parts: dev server 
and build command that bundles your code with ii 
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А что с ESBuild и SWC? 


EE а с.г “SWC can be used for both 
compilation and bundling.” 


$555, SWC Speedy Web Compiler 


—e “By default esbuild will not bundle 
the input files. Bundling must be 


esbuild ОЕ ОСА 


Ап extremely fast JavaScript bundler 
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В SWC и ESBuild работает из коробки: 
Современный - 
ECMAScript Typescript 


JSX Minification 


Просто заменим лоадер! 


DOCUMENTATION CONTRIBUTE VOTE BLOG © мо 5 рф» ж (О Search DOCUMENTATION CONTRIBUTE VOTE BLOG О м 5 +» ж (О Search GBA 


bundle your scripts bundle your scripts 


STATIC ASSETS » STATIC ASSETS 


MODULES WITH DEPENDENCIES MODULES WITH DEPENDENCIES 
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Лайфхак: новый транспайлер для 
Webpack может дать 10-30% ускорения! 
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Но где обещанные 10-100x? 


Для максимального ускорения нужно 
заменить бандлер полностью 


” Построение графа зависимостей занимает время 
e Нужна параллелизация 

e Нужно минимизировать переходы Native-JS 

e Минификация тоже может быть быстрее 
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Может ObITb, все-таки ускорить 
Webpack? 
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Мы попробовали: 


e Рецепты ускорения через конфигурацию 

e Обновления webpack и лоадеров 

e Ленивую сборку (experiments.lazyCompilation) 
e Кэш 


Егоптепа 
Conf 2022 


Нужно заменить Webpack с десятком плагинов 
и множеством настроек на новый бандлер. 


Что может пойти не так? 
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OT зтого нужно отказаться: 


e Специфические для Webpack импорты 


require. 


{ myFunction } fr 
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OT зтого нужно отказаться: 


e Специфические Вабе|-плагины 


<If condition={ true }> 
<span>IfBlock</span> 


СҮТІ» 
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OT зтого нужно отказаться: 


e Глобальные переменные Webpack 


__webpack_public_path__ (webpack-specific) 
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План перехода 


Подготовка (отказ от специфики Webpack + Babel) 
* Выбор бандлера: SWC или ESBuild 
e Настройка сборки и замеры: скорость, lighthouse 
* Перевод локальной сборки на новый бандлер 
e Сбор фидбзка от разработчиков 
* Перевод продакшн-сборки на новый бандлер 
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SWC или ESBuild? 


Stars Issues Version Updated © Created © 
В @swclcore шш ©) © 23,811 298 1.3.0 2 days ago 4 years ago 
™ esbuild mo © 33,141 309 0.15.7 8 days ago 5 years ago 
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3 шага к быстрой сборке 


#1 Настройка ESBuild 


• Первоначальная настройка заняла неделю 
e Stylus + CSS modules вызвали максимум сложности 


。 Сборка: 


e Webpack: З минуты 7 2 
* ESBuild: 25 секунд E X 
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Но где обещанные 10-100х? 


#2 Отказ от ненужного и устаревшего 


e Stylus может занимать больше половины времени сборки 


* Сборка без Stylus 


* Webpack: 1.5 минуты 1 8 
* ESBuild: 5 секунд Х 
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#3 Кэш 


e CSS, бывает, переиспользуется 


e Сборка с кэшем CSS 


e Webpack: 1.5 минуты 30 
e ESBuild: 2.5-3 секунды X 
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Неожиданно 


e Сургеѕѕ-тесты на СІ стали проходить в 2 раза медленнее 
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Хорошие итоги 


e Улучшились метрики B Lighthouse 
e Ускорилась сборка B 30 раз 


e Ноутбуки разработчиков не шумят вентиляторами, а 
батареи хватает на дольше 
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Итоги не очень 


e 3 недели подготовки и 3 недели настройки 
е Некоторые плагины придётся писать самостоятельно 


e Новички будут приходить без опыта 
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Если скорость сборки - не самый 
важный критерий, можно и 


оставить Webpack 


Если скорость сборки имеет значение, 
потребуется 


Webpack заменить 


NIV 


* Поддержка emitDecoratorMetadata 
* Поддержка Jest (@swc-jest) 
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* Простой старт: postcss, glob import и 
многое другое из коробки 


е Абстракция над бандлером 
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4 555%, 
» 
小 ж. 


Ф 


Спасибо за внимание! 


@kib357 
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